<template>
  <div style="display:flex;justify-content: center;text-align: center">
    <el-card style="width: 500px; padding: 20px">
      <el-form label-width="80px" size="small" ref="ruleFormRef" :model="form" :rules="rules">
        <el-upload
            class="avatar-uploader"
            :action="local+'/file/upload'"
            :show-file-list="false" accept="image/png, image/jpeg"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="form.avatar" :src="local+form.avatar" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="用户名称" prop="loginName">
          <el-input v-model="form.loginName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="userName">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="deptId">
          <el-input v-model="form.deptId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="showPsd" :rules="[
            {required: true, message: '必填项', trigger: 'blur'},
          {min: 5, max: 12, message: '长度5-11', trigger: 'blur'},
        ]">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password1" v-if="showPsd" :rules="[
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 5, max: 12, message: '长度5-11', trigger: 'blur'},
        ]">
          <el-input v-model="form.password1" autocomplete="off"></el-input>
        </el-form-item>
        <el-button type="primary" @click="save">确 定</el-button>
        <el-checkbox size="small" style="margin-left: 10px;" @change="changeRadio">修改密码</el-checkbox>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getUser, LocalHost} from "@/utils/tools";

export default {
  name: "Person",
  data() {
    return {
      local: LocalHost,
      form: {},
      user: getUser(),
      showPsd: false,
      rules: {
        loginName: [
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 4, max: 10, message: '长度4-10', trigger: 'blur'},
        ],
        userName: [
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 2, max: 10, message: '长度2-10', trigger: 'blur'},
        ],
        deptId: [
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 2, max: 10, message: '长度2-10', trigger: 'blur'},
        ],
        email: [
          {min: 4, max: 20, message: '长度4-20', trigger: 'blur'},
        ],
        phonenumber: [
          {required: true, message: '必填项', trigger: 'blur'},
          {min: 11, max: 11, message: '长度11', trigger: 'blur'},
        ]
      }
    };
  },
  created() {
    this.load();
  },
  watch: {
    show(newVal) {
      this.showPsd = newVal;
    },
  },
  methods: {
    load() {
      this.request
          .get("/sysuser/username/" + this.user.loginName)
          .then((res) => {
            if (res.success) {
              this.form = res.data;
            }
          });
    },
    save() {
      if (this.showPsd && this.form.password != this.form.password1) {
        this.$message.warning("2次密码不一致！");
        return
      }
      this.$refs.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          this.form.update = 1
          this.request.post("/sysuser", this.form).then((res) => {
            if (res.success) {
              this.showPsd = false;
              this.$message.success("保存成功");
              this.load();
              this.$emit("refreshUser");
            } else {
              this.$message.error("保存失败");
            }
          });
        }
      });
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res;
    },
    changeRadio(val) {
      this.showPsd = val;
    }
  },
};
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
  border-radius: 50%; /* 设置边框半径为50%，将元素变成圆形 */
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}

.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>